<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标悬停出现灰背景，出现字</title>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        .pic{width:300px;height: 300px;position: relative; background-image:url(pic/img0.jpg) }
        .yincang{display: none;}
        #zi{width:300px;height: 100px;position: absolute;left: 0;top: 200px; background: lawngreen;opacity: 0.6;}
    </style>
</head>
<body>
<div class="xuanting">
    <div class="pic">
        <div id="zi" class="yincang">
            <p>牛逼悬停效果</p>
        </div>
    </div>
</div>
<script>
    $(".pic").mouseover(function(){
            $("#zi").removeClass("yincang");
        }).mouseout(function(){
            $("#zi").addClass("yincang");
    });
</script>
</body>
</html>